<template>
  <div class="vk-collapse">
    <slot />
  </div>
</template>

<script setup lang="ts">
import type {CollapseEmits, CollapseProps, NameType} from "./type";
import {ref, watch, provide} from "vue";
import {collapseContextKey} from "./type";

defineOptions({
  name:'VKCollapse'
})
const props = defineProps<CollapseProps>()
const emits = defineEmits<CollapseEmits>()
const activeNames = ref<NameType[]>(props.modelValue)
// watch(() => props.modelValue, () =>{
//   activeNames.value = props.modelValue
// })
if(props.accordion && activeNames.value.length > 1) {
  console.log('accordion mode should only have one acitve item')
}
const handleItemClick = (item:NameType) => {
  let _activeNames = [...activeNames.value]
  if(props.accordion) {
    _activeNames = [activeNames.value[0] === item ? '' : item]

  } else {
    const index = _activeNames.indexOf(item)
    if(index > -1) {
    //   存在，删除数组对应的一项
      _activeNames.splice(index,1)
    } else {
    //   不存在，插入对应name
      _activeNames.push(item)
    }
  }
  activeNames.value = _activeNames
  emits('update:modelValue',_activeNames)
  emits('change',_activeNames)
}
provide(collapseContextKey,{
  activeNames,
  handleItemClick
})
</script>

<style scoped>

</style>
